<template>
  <div class="lawyer-platform-compontent">
    <div class="lawyer" v-for="(item, i) in listData" :key="i">
      <div class="photo">
        <img :src="item.avatar_image" />
      </div>
      <div class="info">
        <div class="flex between" >
          <span class="name">{{ item.name }}</span>
          <span class="consult"  @click="to(item.id)">立即咨询</span>
        </div>
        <div class="title-year">
          <span style="margin-right: 0.3125rem;">{{ item.title }}</span>
          <span>执业{{ item.year }}年</span>
        </div>
        <div class="lawyer-detail">
          <span class="domain-nickName" v-for="(category, index) in item.category_data" :key="index">{{ category.title }}<span v-if="index+1 !== item.category_data.length" class="right-line"></span></span>
        </div>
        <div class="footer">
          <div>
            <div class="lawfirm">{{ item.city_name }} |
              <span >
                <template v-if="lawfirmName">{{ lawfirmName }}</template>
                <template v-else> {{ item.lawyer_firm ? item.lawyer_firm.name : "" }} </template>
              </span>
            </div>
          </div>
          <div v-if="item.distance" class="footer-distance">{{ item.distance }}</div>
        </div>
      </div>
    </div>
    <yz-blank :datas="listData"></yz-blank>
  </div>
</template>
<script>
import mixins from "./mixin.js";
export default {
  mixins: [mixins],
  props: {
    search: String,
    httpUrl: {
      type: String,
      default: "plugin.lawyer-platform.frontend.controllers.merchant.getLawyer"
    },
    lawyers: {
      type: Array,
      default: () => []
    },
    request: {
      type: Boolean,
      default: true
    },
    lawyerId: {
      type: String,
      default: ""
    },
    lawfirmName: {
      type: String,
      default: ""
    }
  },
  methods: {
    to(id) {
      this.$router.push(this.fun.getUrl("lawyerDetail", { id }, { order_type: "lawyer" }));
    }
  }
};
</script>
<style lang="scss" scoped>
// @import "./index.scss";
.lawyer-platform-compontent {
  .domain-nickName {
    position: relative;
    color: #666;
    font-size: 0.75rem;
    border: unset;
    padding: 0;
    margin: 0 0.3125rem 0 0;
    padding-right: 0.3125rem;
  }

  .right-line {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 65%;
    background: #666;
  }

  .footer {
    margin-top: 0.4688rem;
    display: flex;
    color: #a78d25;
    justify-content: space-between;
  }

  .footer-distance {
    margin-left: 0.625rem;
    flex-shrink: 0;
  }

  .lawyer {
    display: flex;
    margin-bottom: 0.9375rem;
  }
  .flex { display: flex; }

  .consult {
    width: 3.9063rem;
    text-align: center;
    height: 1.25rem;
    line-height: 1.25rem;
    border: 1px solid #1b1b1d;
    font-size: 0.6563rem;
    border-radius: 0.625rem;
  }

  .title-year {
    margin: 0.4688rem 0;

    span {
      padding: 0.0625rem 0.3125rem;
      color: #fff;
      border-radius: 0.1875rem;
      background: #a78d25;
    }
  }
  .between { justify-content: space-between; }

  .photo {
    width: 5.4063rem;
    height: 5.4063rem;
    border-radius: 0.1875rem;
    overflow: hidden;
    margin-top: 0;
    margin-right: 0.3125rem;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    font-size: 1rem;
  }
}

</style>
